<template>
  <div>
    <div class="cropper-app">
      <el-form :model="formValidate1" :rules="ruleValidate1" ref="formValidate1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="封面上传" prop="mainImage">
          <div class="list-img-box">
            <div v-if="formValidate1.mainImage !== ''">
              <img :src="formValidate1.mainImage" style='width:300px;height:150px' alt="自定义封面">
            </div>
            <div v-else class="upload-btn" style="height: 120px;" >
              <i class="el-icon-plus" style="font-size: 30px;"></i>
              <span>封面设置</span>
            </div>
          </div>
          <input type="hidden" v-model="formValidate1.mainImage" placeholder="请添加封面">
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="uploadPicture('flagImg1')">上传图片</el-button>

    </div>
    <div class="cropper-app">
      <el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="100px" class="demo-ruleForm">
        <el-form-item label="封面上传" prop="mainImage">
          <div class="list-img-box">
            <div v-if="formValidate.mainImage !== ''">
              <img :src="formValidate.mainImage" style='width:300px;height:150px' alt="自定义封面">
            </div>
            <div v-else class="upload-btn" style="height: 120px;" >
              <i class="el-icon-plus" style="font-size: 30px;"></i>
              <span>封面设置</span>
            </div>
          </div>
          <input type="hidden" v-model="formValidate.mainImage" placeholder="请添加封面">
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="uploadPicture('flagImg')">上传图片</el-button>
      <!--<button  >上传</button>-->
      <!-- 剪裁组件弹窗 -->
      <el-dialog
        title="裁切封面"
        :visible.sync="cropperModel"
        width="950px"
        center
      >
        <cropper-image
          :Name="cropperName"
          @uploadImgSuccess = "handleUploadSuccess"
          ref="child">
        </cropper-image>
      </el-dialog>

    </div>

  </div>

</template>

<script>
  import CropperImage from "../components/crooper";
  export default {
    name: "Tailoring",
    components: {CropperImage},
    data () {
      return {
        formValidate: {
          mainImage: '',
        },
        ruleValidate: {
          mainImage: [
            {required: true, message: '请上传封面', trigger: 'blur'}
          ],
        },
        //裁切图片参数
        cropperModel:false,
        cropperName:'',

        formValidate1: {
          mainImage: '',
        },
        ruleValidate1: {
          mainImage: [
            {required: true, message: '请上传封面', trigger: 'blur'}
          ],
        },
      }
    },
    methods: {
      //封面设置
      uploadPicture(name){
        this.cropperName = name;
        this.cropperModel = true;
      },
      //图片上传成功后
      handleUploadSuccess (data){
        console.log("data",data)
        console.log(data)
        switch(data.name){
          case 'flagImg':
            if( this.cropperName=="flagImg1"){
              //正面数据
              this.formValidate1.mainImage = data.url;
              console.log('最终输出',this.formValidate1.mainImag)
            }else {
              this.formValidate.mainImage = data.url;
              console.log('最终输出',this.formValidate.mainImag)
            }

            break;
        }
        this.cropperModel = false;
      },
    }
  }
</script>
<style scoped>
  .upload-list-cover{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 40px;
    align-items: center;
    background: rgba(0,0,0,.6);
    opacity: 0;
    transition: opacity 1s;
  }
  .cover_icon {
    font-size: 30px;
  }
  .upload-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #cccccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 1px #cccccc;
  }
  .upload-btn:hover {
    border: 1px solid #69b7ed;
  }
  .upload-btn i{
    margin: 5px;
  }
</style>
